<template>
  <div class="bg">孤舟蓑笠翁 ，独钓寒江雪</div>
  <div class="bg-login">
    <div class="login">
      <a-form
        @submit.prevent="handleSubmit"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-item label="用户名" v-bind="validateInfos.username">
          <a-input
            v-model:value="formInline.username"
            placeholder="请输入用户名"
            size="large"
          >
            <template #prefix
              ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
            /></template>
          </a-input>
        </a-form-item>
        <a-form-item label="密码" v-bind="validateInfos.password">
          <a-input
            v-model:value="formInline.password"
            type="password"
            placeholder="请输入密码"
            size="large"
          >
            <template #prefix
              ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
            /></template>
          </a-input>
        </a-form-item>

        <div>
          <span style="display: inline-block; text-align: right; padding-left: 85px">
            <a-button type="primary" html-type="submit" size="large"> 登录 </a-button>
            <a-button style="margin-left: 10px" @click="resetFields" size="large">
              重置
            </a-button>
          </span>
        </div>
      </a-form>
    </div>
  </div>
</template>
<script>
import { message } from "ant-design-vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { notEmpty } from "@/utils/validator";
import { reactive, ref } from "vue";
import { useForm } from "@ant-design-vue/use";
import { login as LoginConfig } from "@/api/login.conf";
import useToken from "@/hooks/token/useToken";
import { useService } from "@/utils/request";

export default {
  components: { UserOutlined, LockOutlined },
  setup() {
    const { push } = useRouter();
    const { setToken } = useToken();
    const loginPost = useService(LoginConfig);

    const ruleForm = ref(null);

    const formInline = reactive({
      username: "",
      password: "",
      grant_type: "password",
    });

    const rules = reactive({
      username: [
        {
          validator: notEmpty("用户名不能为空"),
        },
      ],
      password: [
        {
          validator: notEmpty("密码不能为空"),
        },
      ],
    });

    const { resetFields, validate, validateInfos } = useForm(formInline, rules);

    function handleSubmit() {
      validate().then(() => {
        const formData = new FormData();
        Object.keys(formInline).forEach((key) => {
          formData.append(key, formInline[key]);
        });
        
        loginPost.setData(formData).reload(true, (response) => {
          console.log(response)
          response.then((res) => {

            if (res.code == 1) {
              message.error("用户名或密码错误");
              return;
            }
            setToken({ token: res.access_token || null });
            
            message.success("登陆成功");
            setTimeout(() => {
              push({
                path: "/",
              });
            }, 800);
          });
        });
      });
    }
    return {
      formInline,
      handleSubmit,
      ruleForm,
      resetFields,
      validateInfos,
    };
  },
};
</script>
<style scoped>
.bg {
  background: linear-gradient(to bottom, #4ec5f4 0%, #207ce5 100%) no-repeat;
  background-size: 100% 260px;
  height: 260px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 32px;
  font-weight: 600;
  color: #fff;
}
.bg-login {
  min-height: calc(100vh - 280px);
  background-image: linear-gradient(to bottom, #dfe9f3 0%, white 100%);
}
.login {
  margin: 0 auto;
  padding-top: 20px;
  width: 500px;
}
</style>
